<template>
  <div>
    <div>
      <el-row>
        <el-col :span="12">
          <el-select style="width: 75%" v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="12">
          <el-select style="width: 75%" v-model="value1" placeholder="请选择">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-row>
    </div>
    <div v-for="(item, key) in depthList" :key="key" class="depth-content">
      <div class="x-statistic">
        <div style="position: relative; height: 54px">
          <div class="title">{{ item.name }}</div>
          <div class="count">
            <span class="value">{{ item.value }}</span
            ><span class="unit">{{ item.unit }}</span>
          </div>
        </div>
      </div>
      <pentagon class="pentagon" />
    </div>
  </div>
</template>

<script>
import pentagon from "../../components/canvas/pentagon.vue";
export default {
  components: { pentagon },
  data() {
    return {
      depthList: [
        { name: "污水井", value: "0", unit: "个" },
        { name: "污水管道", value: "0", unit: "米" },
        { name: "雨水井", value: "320", unit: "个" },
        { name: "雨水管道", value: "2358", unit: "米" },
      ],
      options: [
        {
          value: "同里镇",
          label: "同里镇",
        }
      ],
      options1: [
        {
          value: "同里大道",
          label: "同里大道",
        }
      ],
      value: "",
      value1: ""
    };
  },
};
</script>
<style lang="scss" scoped>
.depth-content {
  width: 50%;
  float: left;
  margin-top: 40px;
  position: relative;
}
.title {
  font-size: 16px;
  color: #fff;
  background: linear-gradient(180deg, #0c2e45 0, #1f97b7);
  min-width: 6rem;
  position: absolute;
  top: -25%;
  left: 15%;
  padding: 3px;
  text-align: center;
  letter-spacing: 0.4em;
}
.count {
  font-size: 16px;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.value {
  font-family: 等线;
  font-size: 20px;
  margin-right: 10px;
  color: rgb(0, 215, 233);
}
.unit {
  font-size: 14px;
  color: #7eade4;
}
.x-statistic {
  position: relative;
  z-index: 9;
}
.pentagon {
  position: absolute;
  top: 0;
  left: 17.5px;
}
</style>
